<template>
    <div class="wrap">
        <!--1. 搜索-->
        <div class="search">
            <div class="location">
                <van-dropdown-menu class="van-drop">
                    <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </div>
            <div class="kw">
                <input type="text" placeholder="搜索..." />
                <img
                        class="fdj"
                        src="http://106.52.75.114/uploads/attach/2025/07/20250702/7418df5a235e4f609fe5f56faaf8186e.png"
                        alt="放大镜"
                />
            </div>
        </div>
        <!--2. 轮播图 -->
        <!--后期使用的第三方的swiper组件 以及轮播图接口-->
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
                <van-swipe-item v-for="item in banners" :key="item._id">
                    <img :src="item.imageUrl"/>
                </van-swipe-item>
            </van-swipe>
        </div>

        <!--3. 列表选项卡-->
        <div class="tabs">
            <div class="header">
                <div class="left">
                    <div class="active item">推荐</div>
                    <div class="item">最新</div>
                </div>
                <div class="right">筛选</div>
            </div>
            <div class="list">
                <div class="item" v-for="item in workList" :key="item._id">
                    <div class="header">
                        <h2 class="title">{{item.title}}</h2>
                        <h3 class="salary">{{item.salary}}</h3>
                    </div>
                    <div class="tag">{{item.workAddress}}|{{item.workRange}}|{{item.education}}</div>
                    <div class="welfare">
                        <span v-for="child in item.welfare" :key="child">{{child}}</span>
                    </div>
                    <div class="company-info" v-for="v in item.companyInfo" :key="item._id">
                        <div class="left">
                            <img
                                    :src="v.logoUrl"
                                    alt="公司logo"
                                    class="logo"
                            />
                            <div class="info">
                                <h2>{{v.title}}</h2>
                                <p>{{v.companyType}} {{v.companyNumber}}</p>
                            </div>
                        </div>
                        <div class="right">立即投递</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { DropdownMenu, DropdownItem } from 'vant';
    import { Swipe, SwipeItem } from 'vant';
    import {getbannerList,getcityList,getworkList} from "../../api/home";
    import {ref,onMounted} from  "vue"

    let banners = ref([])
    let workList = ref([])
    let option1 = ref([])
    let value1 = ref(0)

    //获取轮播图
    onMounted(async ()=>{
        const res = await getbannerList()
        banners.value = res.data.info.banners
        console.log("banner",banners.value)
        const cityarray = await getcityList()
        console.log("city",cityarray)
        option1.value=cityarray.data.map((item,index)=>({
            text:item,
            value:index
        }))

        //获取岗位信息
        const work_data = await getworkList()
        workList.value = work_data.data.list
        console.log("work",workList)
    })
</script>

<style scoped lang="less">
    .wrap {
        .search {
            background-color: #149639;

            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 0.18rem 0.29rem;

            .location {
                display: flex;
                align-items: center;

                /*组件类名*/
                /deep/ .van-dropdown-menu__bar{
                    background-color: #149639;
                }

                h3 {
                    font-size: 0.36rem;
                    color: #fff;
                    margin-right: 0.2rem;
                }

                .select {
                    width: 0.26rem;
                    height: 0.18rem;
                }
            }

            .kw {
                position: relative;

                input {
                    outline: none;
                    border: none;
                    padding-left: 0.37rem;
                    width: 5.47rem;
                    height: 0.6rem;
                    line-height: 0.6rem;
                    background: #f4f4f4;
                    border-radius: 0.3rem;
                }

                .fdj {
                    position: absolute;
                    top: 0.11rem;
                    right: 0.3rem;
                    width: 0.38rem;
                    height: 0.38rem;
                }
            }
        }

        .banner {
            img {
                width: 7.5rem;
                height: 3.02rem;
            }
        }

        .tabs {
            padding: 0 0.29rem 50px 0.29rem;

            > .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #333333;
                padding: 0.4rem 0;

                .left {
                    display: flex;
                    align-items: center;
                    font-size: 0.3rem;

                    .item {
                        margin-right: 0.31rem;
                        padding: 0.19rem 0;

                        &.active {
                            color: #149639;
                            border-bottom: 0.04rem solid #149639;
                            font-weight: 700;
                        }
                    }
                }

                .right {
                    font-size: 0.24rem;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    padding: 0 0.27rem;
                    background: #f4f4f4;
                    text-align: center;
                    border-radius: 0.08rem;
                }
            }
        }

        .list {
            .item {
                margin-bottom: 0.6rem;
                > .header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 0.36rem;

                    .title {
                        color: #333333;
                    }

                    .salary {
                        color: #149639;
                        font-weight: 500;
                    }
                }

                .tag {
                    font-size: 0.24rem;
                    color: #666666;
                    margin-top: 0.19rem;
                    margin-bottom: 0.27rem;
                }

                .welfare {
                    display: flex;

                    margin-bottom: 0.3rem;
                    span {
                        padding: 6px 5px;
                        margin-right: 0.1rem;
                        text-align: center;
                        color: #666666;
                        background-color: #f4f4f4;
                        border-radius: 0.08rem;
                    }
                }

                .company-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left {
                        display: flex;
                        align-items: center;

                        .logo {
                            width: 0.6rem;
                            height: 0.6rem;
                            border-radius: 50%;
                            background-color: #ccc;
                            margin-right: 0.16rem;
                        }
                        .info {
                            > h2 {
                                font-size: 0.24rem;
                                color: #333333;
                                margin-bottom: 0.12rem;
                            }
                            > p {
                                font-size: 0.18rem;
                                color: #666;
                            }
                        }
                    }
                    .right {
                        padding: 0.14rem 0.18rem;
                        border: 0.02rem solid #149639;
                        border-radius: 0.25rem;
                        color: #149639;
                        font-size: 0.24rem;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
